<template>
  <!--
  单元素动画
   动画条件：进入/离开动作   v-if/v-show 动态组件，组件根节点
   实现
      1:用transition包住动画元素
      2：加入name属性，name的值就是动画css的前缀
          .xxx-enter-active
          .xxx-enter
          .xxx-leave-active
          .xxx-leave-to
 -->

  <div>
    <button @click="show = !show">按钮点击</button>
    <transition name="xxx">
      <div v-if="show">hello</div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
.xxx-enter-active,
.xxx-leave-active {
  transition: opacity 1.5s;
}
.xxx-enter, .xxx-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
